<template>
  <a-modal class="common-modal" :title="title" :footer="null" :width="500" :visible="visible" :confirm-loading="confirmLoading" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="confirmLoading">
      <a-form :model="formState" @validateFields="handleOk" ref="formRef" layout="vertical" class="common-modal-content">
        <a-row :gutter="24">
          <a-col :span="19">
            <a-row>
              <a-col :span="24">
                <a-form-item :label="$t('deviceManage.waterLineNo')" name="hangerLineId" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('deviceManage.pleaseSelectWaterLineNo') }]">
                  <a-select v-model:value="formState.hangerLineId" allowClear :options="selectOptions.waterList" @change="getTrackList1(formState.hangerLineId)" :placeholder="$t('common.pleaseSelect')"></a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item :label="$t('hangManage.trackCode')" name="masterTrackId" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('other.pleaseSelectTrack') }]">
                  <a-select v-model:value="formState.masterTrackId" allowClear  :placeholder="$t('common.pleaseSelect')">
                    <a-select-option v-for="item in mainTrackList" :key="item.masterTrackNo" :value="item.id" >{{ item.masterTrackNo}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="26">
                <a-form-item :label="$t('other.addStationNumber')+':'" name="num" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('hangManage.pleaseInputAddStationNumber') }]">
                  <a-input-number :min="1" :max="60" v-model:value="formState.num" :placeholder="$t('hangManage.pleaseInputAddStationNumber')" />
                </a-form-item>
              </a-col>
            </a-row>

          </a-col>
        </a-row>

      </a-form>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{ $t('common.cancel') }}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{ $t('common.ok') }}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup name="editDialog">
import { nextTick, ref, onBeforeMount } from 'vue';
// import { PlusOutlined } from '@ant-design/icons-vue'
// import { uploadUrl } from '@/api/commonApi'
import axios from '@/utils/request'
// import { message } from 'ant-design-vue'
import { cloneDeep } from 'lodash'
// import {getText} from "@/utils";
// import PartTable from './partTable.vue'
// import { beforeImgUpload } from '@/utils'
import i18n from '@/locales/index'
const { t } = i18n.global
const emits = defineEmits(['ok', 'backValues'])
const labelCol = {  span: 23 }
const wrapperCol = { span: 23 }
// const labelCol1 = { xs: { span: 24 }, sm: { span: 3 } }
// const wrapperCol1 = { xs: { span: 24 }, sm: { span: 20 } }
let title = ref('')
let visible = ref(false)
let isEdit = ref(false)
let confirmLoading = ref(false)
const selectOptions = ref({})
let recordInfo = ref({})
let formState = ref({})
const formRef = ref()
// let partNameList = ref([])
let mainTrackList = ref([])

// let previewVisible = ref(false)
// let previewImage = ref('')
let fileList = ref([])

const  getTrackList1 = async (id)=>{
  if (id){
    let waterArr = await axios.postAction('/api/device/hanger-line-bridge/three-level-pull-down');
    waterArr.data && waterArr.data.forEach(item=>{
      if (item.id === id){
        mainTrackList.value = item.masterTrackList;
      }
    })
  }
}

const edit = async (record, editable) => {
  initModalData(record, editable)
  await nextTick()
  formRef.value.resetFields()
  // 查询客户机详情
  if (record.id) {
    const res = await axios.getAction('/api/device/client/get', { id: record.id })
    if (res.success) {
      record = res.data;
    }
  }
  formState.value = cloneDeep(record)
}

const initModalData = (record, editable) => {
  if (record.id){
    title.value = t('other.editStation')
  }else{
    title.value = t('other.addStation')
  }
  // partNameList.value = productPartNameList && productPartNameList.length ? productPartNameList.map(item => ({
  //   name: item,
  //   id: Math.random()
  // })) : [{ id: Math.random(), name: undefined }]
  // if (url) fileList.value = [{ uid: '-1', url }]

  recordInfo.value = Object.assign({}, record)
  visible.value = true
  isEdit.value = editable
}

const handleOk = async () => {
  try {
    const values = await formRef.value.validateFields();
    confirmLoading.value = true
    emits('backValues', values)
  } catch (err) {
    console.log('0000000', err);
  }
  confirmLoading.value = false
};
const handleCancel = () => {
  visible.value = false
  initModalStatus()
}
const initModalStatus = () => {
  confirmLoading.value = false
  formState.value = {}
  formRef.value.resetFields()
  fileList.value = []
}

const close = () => {
  confirmLoading.value = false
  visible.value = false
}
const initSelectOptions = (obj) => {
  selectOptions.value = obj
}

onBeforeMount(() => {
  // console.log("editDialog");
})
defineExpose({
  edit,
  initSelectOptions,
  close
})

</script>
